<template>
  <div>
    <van-nav-bar title="登录" left-text="返回" left-arrow @click-left="onClickLeft" @click-right="onClickRight" />
    <van-form @submit="onSubmit" class="loginContainer">
      <van-field v-model="username" name="用户名" label="用户名" placeholder="用户名必须为xy..." :rules="[{ required: true, message: '请填写用户名' },
      { validator: checkUserName, message: '用户名不符合要求' }]" />
      <van-field v-model="password" v-if="type==='password'" :type = "passwordType" name="密码" label="密码" placeholder="密码" :rules="[{ required: true, message: '请填写密码' },
      { validator: checkPassword, message: '密码不符合规范' }]" >
        <template slot="right-icon">
	        <span class="solts" @click="switchPasswordType">
	           <van-icon name="eye" v-if="passwordType ==='password'"/>
	           <van-icon name="closed-eye" v-else />
	        </span>
	      </template>
      </van-field>
      <van-field v-model="code"  v-if="type==='sendCode'" name="验证码" label = "验证码" placeholder="请输入验证码" :rules="[{ required: true, message: '验证码错误' },
      { validator: checkCode, message: '验证码不正确' }]"  >
      <template slot="right-icon">
        <van-button @click="sendCode" plain  size="small"   :disabled = disable :type="codeType">{{ codeLabel }}</van-button>
	    </template>
      </van-field>
      <div style="margin: 16px;">
        <van-button round block type="info" native-type="submit">提交</van-button>
      </div>
      <div class="phoneCode">
        <a href="#" @click= "type = 'sendCode'" v-if="type==='password'">验证码</a>
        <a href="#" @click= "type = 'password'" v-if="type==='sendCode'">密码</a>
        <a href="#">注册</a>
      </div>
    </van-form>
  </div>
</template>

<script>
export default {
  name: 'UserLogin',
  data() {
    return {
      username: '13294084755',
      password: 'he19950215' ,
      passwordType: 'password',
      disable: false,
      codeLabel:'验证码',
      code: '',
      codeType:'primary',
      type: 'password'
    }
  },
  components: {},
  computed: {},
  methods: {
    onClickLeft() {
      this.$toast('返回');
      this.$router.go(-1)
    },
    onClickRight() {
      Toast('按钮');

    },
    checkUserName(userName) {
      console.log(userName)
      return true
    },
    checkPassword(password) {
      console.log(password)
      return true
    },
    onSubmit(data) {
      this.$router.push({
        name: 'home'
      })
      console.log('onSubmit', data)
    },
    switchPasswordType() {
      this.passwordType = this.passwordType === 'password' ? 'text' : 'password'
    },
    checkCode () {
      return true
    },
    sendCode () {
      console.log('sendCode')
      this.disable = true
      let time =59
      this.codeLabel = time +'s'
      this.codeType = 'default'
      const interval = setInterval(() => {
        time --;
        this.codeLabel = time +'s'
        if(time <= 0){
           this.disable = false
           clearInterval(interval)
           this.codeLabel = '获取验证码'
        }
      }, 1000 );
    }

  }

}
</script>

<style scoped lang='scss'>

.loginContainer {
 
}

.phoneCode {
  display: flex;
  justify-content: center;
  a {
    margin-left: 10px;
  }
}
</style>
